<template>
  <div class="HeadBar">
    <div class="bar">
      <span class="uicon">
        <a href="javascript:;" v-if="$store.state.token">
          <img src="../../state/img/login01.jpg" alt=""
        /></a>
      </span>
      <span class="menu"
        ><a href="javascript:;" class="iconfont">&#xe616;</a></span
      >
      <ul>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe843;首页</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe660;归档</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xf22f;收集</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe609;学习</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe617;随笔</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe60b;相册</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe630;留言</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe63a;幼稚园</a>
        </li>
        <li class="option">
          <a href="javascript:;" class="iconfont optionTxt">&#xe614;关于</a>
        </li>
      </ul>
      <div class="search">
        <div class="searchBox" v-if="$store.state.token">
          <input type="text" class="inp" placeholder="请输入" id="sou" />
          <label class="iconfont icon" for="sou">&#xe6a3;</label>
        </div>
        <el-button
          type="primary "
          size="mini"
          round
          class="inOut"
          v-if="$store.state.token"
          @click="outLogin"
          >退出</el-button
        >
        <el-button
          type="primary "
          size="mini"
          round
          class="inOut"
          v-else
          @click="goLogin"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HeadBar',
    data() {
      return {};
    },

    methods: {
      // 登录
      goLogin() {
        this.$router.push('/login');
      },
      // 退出
      outLogin() {
        this.$store.state.token = '';
        localStorage.removeItem('token');
        this.$router.replace('/login');
        this.$message({
          message: '已退出',
          type: 'success',
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/css/headBar/headBar.css');
</style>
